/* default styles */
* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
    box-sizing: border-box;
}

/* background color for the web page */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    /* overflow:auto; */
}

label{
    margin-bottom: 0;
}

h1{
    display: inline-block;
    vertical-align: middle;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.Header_Image{
    text-align: center;
    
}

/* Header styles */
.calculator {
    margin-top: 20px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    /* max-width: 100%;
    margin-left: 100%;
    margin-right: 100%; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.calculator img {
    max-width: 100px;
    height: auto;
    margin-bottom: 20px;
    display: inline;
    vertical-align: middle;
}

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

/* p {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    color: black;
    margin-bottom: 20px;
} */

/* ul {
    border: 2px solid rebeccapurple;
    padding: .5em;
  } */
/*   
  .block,
  li {
    border: 2px solid black;
    padding: .5em;
  }
  
  ul {
    display: flex;
    list-style: none;
  } */

/* Vehicle type fieldset styles */
fieldset {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

legend {
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

.toll-facility-checkbox{
    margin-top: 2px;
    /* text-align: left; */
}

.toll-facilities {
    margin-top: 10px;
    text-align: left;
}


/* Style for the radio buttons */
/* input[type="radio"] {
    margin-left: 50px; 
} */

/* radio button styles */
/* input[type="radio"] {
    margin-left: 0; 
    position: absolute;
    opacity: 0;
    cursor: pointer;
} */

/* button-like styles for each vehicle type */
li.radio-container {
    /* how u wanna display the vehicle types */
    /* display:flex; */
    /* display: block; */
    display:grid;
    /* display:inline-block; */
    /* display: inline-flex; */
    /* display:inline-table;                [This is better than inline block]*/
    /* display: inline-table; */

    margin-right: 10px; 
    background: linear-gradient(to bottom, #007bff, #0056b3); 
    /* color: #fff;  */
    border: none;
    border-radius: 5px;
    overflow: hidden;
    padding: 0; 
    /* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2); */
    /* cursor: pointer; */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s, perspective 0.3s;
    perspective: 1000px;
    cursor: pointer;
}

/* Hover effect for the buttons */
li.radio-container:hover {
    /* background-color: #0056b3;  */
    transform: translateY(-2px) rotateX(5deg);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
    background: linear-gradient(to bottom, #0056ba, #007bff);
}

/* Center text within the button */
li.radio-container label {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    /* vertical-align: middle; */
}

/* Hide the radio input */
li.radio-container input[type="radio"] {
    display: none;
}

/* Styles for the selected button */
li.radio-container input[type="radio"]:checked + label {
    background-color: #003c80;
    /* transform: scale(0.95);  don't do that because managers want this to be all dark*/
    box-shadow: none;
}


/* #truck-axles {
    display: none;
  } */

/* input[type="radio"] {
    margin-left: 10px;
} */

/* Dropdown styles */
/* select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 20px;
} */

/* Button styles */
.custom-button {
    margin-bottom: 20px; 
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.custom-button:hover {
    background-color: #643a06;
}

/* Note container styles */
/* .note-container {
    background-color: #c1c1c1;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
    display: none;
} */

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 5px;
}

/* Table styles for toll prices */
#toll-prices {
    margin-top: 20px; 
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#toll-prices tr {
    border-bottom: 1px solid #ccc;
}

#toll-prices td {
    padding: 10px;
    text-align: left;
}

#toll-prices td:first-child {
    font-weight: bold;
    width: 40%;
}

#toll-prices td:last-child {
    font-weight: normal;
    width: 60%;
}

/* Style for the total cost spans */
#ezpassCost, #midtierCost, #tollbymailCost {
    font-weight: normal;
}


/* Default styles for larger screens */
/* .calculator {
    width: 80%;
    margin: 0 auto;
} */

/* Media query for smaller screens
@media screen and (max-width: 768px) {
    .calculator {
        width: 90%;
    }

    body {
        font-size: 14px;
    }
} */